<template>
  <div v-show="pageShow">
    <nav-header
      :headerTitle="show.headerTitle"
      :headerNext="'编辑'"
      :navMainColor="show.navMainColor"
      :navBgColor="show.navBgColor"
      @tap2next="goUrl('editShop',{shopId:MyShopItems.MyShopItems.shopId})"
    ></nav-header>
    <section class="page">
      <MyShopItems
        :MyShopItems.sync="MyShopItems.MyShopItems"
        :ProductItems.sync="MyShopItems.ProductItems"
        :isSelf.sync="MyShopItems.isSelf"
        :isProduct.sync="MyShopItems.isProduct"
        :isProductHeader.sync="MyShopItems.isProductHeader"
        @MyShopItemsClick="MyShopItemsClick"
      ></MyShopItems>
      <div class="null78"></div>
      <div class="pf-footer">
        <div class="pff-content">
          <img src="@/assets/images/shop_share.png" alt />
          <span class="spanOne">分享店铺</span>
          <span class="spanTwo" v-on:click="myDaili">我要代理</span>
        </div>
      </div>
    </section>
    <ModalDli
      :isModal.sync="ModalDli.isModal"
      :wxName.sync="ModalDli.wxName"
      :QQName.sync="ModalDli.QQName"
      :phone.sync="ModalDli.phone"
      @ModalDliClick="ModalDliClick"
    ></ModalDli>
  </div>
</template>

<script>
import Vue from "vue";
import {Dialog } from "vant";
Vue.use(Dialog);
import navHeader from "@/components/NavHeader";
import MyShopItems from "@/components/MyShopItems";
import ModalDli from "@/components/ModalDli";
import mixin from "@/utils/mixin";
export default {
  name: "MyShop",
  mixins: [mixin],
  components: {
    navHeader,
    MyShopItems,
    ModalDli
  },
  data() {
    return {
      pageShow: false,
      show: {
        headerTitle: "我的店铺",
        navBgColor: "rgba(0, 0, 0, 0)",
        navMainColor: "#fff"
      },
      ModalDli: {
        isModal: false,
        wxName: "",
        QQName: "",
        phone: ""
      },
      params: {},
      MyShopItems: {
        MyShopItems: {},
        ProductItems: [],
        isSelf: true,
        isProduct: true,
        isProductHeader:true,
        isShow:false,
      }
    };
  },
  created() { 
    this.$setgoindex() ;
    this.init();
    this.initDialog();
  },
  mounted() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    window.addEventListener("scroll", this.nextScroll);
  },
  //销毁滑动事件
  beforeDestroy() {
    window.removeEventListener("scroll", this.nextScroll);
  },
  methods: {
    init() {
      this.params = {
        uniqueId: window.localStorage.uniqueId
      };
      this.$http.post("shop/getUserShopInfo", this.params).then(
        res => {
          //console.log(res);
          res = res.data.shopInfo;
          this.MyShopItems.MyShopItems = res;
          this.ModalDli.wxName = res.shopOwnerWxQrcodeUrl;
          this.ModalDli.QQName = res.shopOwnerQqNum;
          this.ModalDli.phone = res.shopOwnerTelNum;
          window.localStorage.setItem(
            "ModalDli",
            JSON.stringify(this.ModalDli)
          );
          if (res.shopId) {
            this.initProduct(res.shopId);
            this.pageShow = true;
          } else {
            this.pageShow = false;
            Dialog.confirm({
              message:
                "当前店铺不存在,请添加店铺！",
              showCancelButton: false,
              confirmButtonText: "添加店铺",
              beforeClose:(action, done)=>{
                done();
                this.$router.replace('/adMine/editShop');
              }
            });
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    initProduct(shopId) {
      this.params = {
        shopId: shopId,
        pageNum: 1,
        pageSize: 3
      };
      this.$http.post("product/getProductInfoByPagination", this.params).then(
        res => {
          res = res.data.items;
          //console.log(res);
          if (res.length == 0) {
            this.MyShopItems.isProduct = false;
          }
          this.MyShopItems.ProductItems = res;
          //console.log(this.MyShopItems);
          this.isShow=true;
        },
        err => {
          console.log(err);
        }
      );
    },
    nextScroll: function() {
      let scrollDiff = this.getScrollTop();
      console.log(scrollDiff);
      if (scrollDiff >= 100) {
        this.show.navBgColor = "#fff";
        this.show.navMainColor = "#303133";
      } else {
        this.show.navBgColor = "rgba(0, 0, 0, 0)";
        this.show.navMainColor = "#fff";
      }
    },
    myDaili: function() {
      this.ModalDli.isModal = true;
    },
    MyShopItemsClick: function() {},
    ModalDliClick: function() {},
    initDialog() {
      Dialog.setDefaultOptions({
        messageAlign: "center",
        cancelButtonColor: "#303133",
        confirmButtonColor: "#FF2525",
        closeOnPopstate: true
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .null78 {
    width: 100%;
    height: 78px;
  }
  .pf-footer {
    width: 100%;
    height: 120px;
    z-index: 200;
    position: fixed;
    bottom: 0px;
    background: #fff;
    .pff-content {
      width: 100%;
      height: 100%;
      position: relative;
      .spanOne {
        font-size: 26px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 37, 37, 1);
        position: absolute;
        left: 100px;
        top: 42px;
      }
      .spanTwo {
        width: 300px;
        height: 88px;
        background: rgba(255, 37, 37, 1);
        border-radius: 44px;
        line-height: 88px;
        text-align: center;
        position: absolute;
        right: 32px;
        top: 16px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      img {
        width: 48px;
        height: 48px;
        position: absolute;
        left: 32px;
        top: 36px;
      }
    }
  }
}
</style>
